<template>
       <div class="main-item">
                <div class="article-author">
                    <img  src="../assets/images/head.png" alt="author" class="article-picture">
                    <span class="name">作者：{{item.user.username}}</span>
                    <span class="position">职位：{{item.user.position}}</span>
                    <span class="sex" v-if="item.user.gender == 'male'">是个小姐姐诶</span>
                    <span class="sex" v-else>是个小帅锅诶</span>
                    <span class="del" v-if="this.isAdmin" @click.stop="del(item)">
                        <i class="el-icon-circle-close-outline el-input__icon" slot="suffix" ></i>
                    </span>
                </div>
                <h3 class="article-title">
                    {{item.title}}
                </h3>
                <div class="article-content">
                  {{item.content}}
                </div>
                <div class="article-reviews">
                    <span class="zan" :class="{zaned:item.questionLikeCount.like}" @click.stop="addLikeNum(item)" >👍 {{item.questionLikeCount.likeNum | isNull}}</span>
                    <span class="comment">评论数：<span class="num">{{item.solutionNum}}</span>条</span>
                    <span class="time">{{item.createTime}}</span>
                </div>
            </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
export default {
  name: "listItem",
  props: {
    item: Object
  },
  data() {
    return {
      subItem: {}
    };
  },
  computed: {
    ...mapState({
      isAdmin: "isAdmin",
      isLogin: "isLogin"
    })
  },
  methods: {
    addLikeNum(itemObj) {
      if (!this.isLogin) {
        this.$confirm("是否现在去登录?", "未登录", {
          confirmButtonText: "登录 / 注册",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            this.$router.push("login");
          })
          .catch(() => {});
      } else {
        this.axios
          .post("/homeApl/questionlike/", {
            userId: localStorage.userId,
            questionId: itemObj.questionId
          })
          .then(response => {
            if (response.data.code == 0) {
              this.$emit("refurbished");
              //  itemObj.likeNum = response.data.result.likeNum;
            }
          })
          .catch(error => {
            console.log(error);
          });
      }
    },
    del(itemObj) {
      this.axios
        .delete("/homeApl/question/" + itemObj.questionId)
        .then(response => {
          if (response.data.code == 0) {
            this.$emit("refurbished");
          }
        })
        .catch(error => {
          console.log(error);
        });
    }
  },
  filters: {
    isNull: value => {
      if (!value) {
        return 0;
      } else {
        return value;
      }
    },
    isTimeNull: value => {
      var formatDateTime = function(date) {
        var y = date.getFullYear();
        var m = date.getMonth() + 1;
        m = m < 10 ? "0" + m : m;
        var d = date.getDate();
        d = d < 10 ? "0" + d : d;
        var h = date.getHours();
        h = h < 10 ? "0" + h : h;
        var minute = date.getMinutes();
        minute = minute < 10 ? "0" + minute : minute;
        var second = date.getSeconds();
        second = second < 10 ? "0" + second : second;
        return y + "-" + m + "-" + d + " " + h + ":" + minute + ":" + second;
      };
      if (!value) {
        return formatDateTime(new Date());
      } else {
        return value;
      }
    }
  }
};
</script>

<style scoped lang='scss'>
.main-item {
  background: #ffffff;
  width: 99%;
  padding: 20px;
  box-sizing: border-box;
  margin: 20px auto;
  cursor: pointer;
  &:hover {
    box-shadow: 0 0 5px 2px #bbbbbb;
  }
  .article-author {
    height: 40px;
    line-height: 40px;
    position: relative;
    .article-picture {
      vertical-align: middle;
    }
    .name {
      margin: 0 10px;
    }
    .position {
      color: #2b27278f;
      margin-right: 10px;
    }
    .sex {
      color: #2a36c7;
    }
    .del {
      position: absolute;
      right: 10px;
      top: 0px;
      margin-right: 20px;
    }
  }
  .article-title {
    width: 100%;
    margin: 5px 0px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
  .article-content {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
  }
  .article-reviews {
    height: 30px;
    line-height: 30px;
    margin: 10px 0px;
    position: relative;
    span {
      cursor: pointer;
    }
    .zan {
      display: inline-block;
      width: 100px;
      height: 30px;
      line-height: 30px;
      text-align: center;
      background: rgba(0, 132, 255, 0.1);
      color: #2a36c7;
      border-radius: 4px;
    }
    .zaned {
      background: red;
      color: #ffffff;
    }
    .comment {
      margin: 0 20px;
      .num {
        color: red;
        margin: 0 4px;
      }
    }
    .time {
      position: absolute;
      top: 0px;
      right: 20px;
      color: #b3a7a7;
    }
  }
}
</style>